<!-- 财务结算 -->
<template>
  <div class="customer-maintenance">
    <!-- 查询 -->
    <el-form label-width="80px" :model="formData" size="mini" :inline="true" class="demo-form-inline">
      <el-row :gutter="15">
        <el-col :span="16">
          <el-select size="mini" filterable v-model="formData.customerId" @visible-change="selectStar" @change="getTlementList(1, 15)">
            <el-option label="所有客户" value=""></el-option>
            <el-option v-for="item in userInfo" :key="item.ID" :label="item.search" :value="item.UserId"></el-option>
          </el-select>
          <el-button type="primary" plain icon="el-icon-check" size="mini" @click="openSettlement()">结算</el-button>
          <el-button type="danger" size="mini" icon="el-icon-refresh" @click="openFallback()">结算回退</el-button>
          <el-button type="primary" size="mini" icon="el-icon-search" @click="openBilling()">结算单查看</el-button>
          <el-button type="warning" size="mini" v-if="loadShow" icon="el-icon-document" @click="batchExport()">批量导出</el-button>
          <el-button type="primary" size="mini" v-else :loading="true">导出中</el-button>
          <el-button type="primary" size="mini" icon="el-icon-document" @click="openPay()">款项结清</el-button>
        </el-col>
        <el-col :span="8">
          <div style="display: flex; justify-content: flex-end; height: 29px; margin-bottom: 20px;">
            <el-form-item>
              <el-input v-model="formData.searchMent" clearable @keyup.enter.native="getTlementList(1,15)"></el-input>
            </el-form-item>
            <el-button type="primary" size="mini" @click="getTlementList(1,15)">搜索</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <!-- 表格 -->
    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.5)"
      border
      :data="tableData"
      @selection-change="handleSelectionChange"
      style="width: 100%">
      <el-table-column type="selection" align="center" width="50"></el-table-column>
      <el-table-column
        align="center"
        label="用箱人">
        <template slot-scope="scope">
          {{scope.row.CompanyName}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="未付金额">
        <template slot-scope="scope">
          {{scope.row.wjqMoney}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="本期未付金额">
        <template slot-scope="scope">
          {{scope.row.bqwjqMoney}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="180"
        label="最新结算周期">
        <template slot-scope="scope">
          {{scope.row.jsTime}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="状态">
        <template slot-scope="scope">
          {{scope.row.state | moneyState}}
        </template>
      </el-table-column>
      <!-- <el-table-column
        align="center"
        label="备注">
        <template slot-scope="scope">
          {{scope.row.CompanyName}}
        </template>
      </el-table-column> -->
      <el-table-column
        align="center"
        label="操作">
        <template slot-scope="scope">
          <el-button size="mini" icon="el-icon-tickets" @click="handeList(scope.row.customerId)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="salesman-man-pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageNo"
        :page-sizes="[15, 20, 30]"
        :page-size="number"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!-- 结算 -->
    <settlement-dialog :customerid="customerid"></settlement-dialog>
    <!-- 结算回退 -->
    <settlement-fallback-dialog :customerid1="customerid1"></settlement-fallback-dialog>
    <!-- 结算单查看 -->
    <billinglist-view-dialog></billinglist-view-dialog>
    <!-- 结算清单 -->
    <settlement-list-dialog :customerid2="customerid2"></settlement-list-dialog>
    <!-- 款项结清 -->
    <paysettlement-dialog :order="order" :uploadData="uploadData"></paysettlement-dialog>
  </div>
</template>

<script>
import {
  settlementList,
  batchExport
} from './api/finance'
import {
  SearchUserInfo
} from '../cpInfoMan/api/customerManagement'
import util from '@util'
import SettlementDialog from './dialog/financialSettlement/SettlementDialog'
import SettlementFallbackDialog from './dialog/financialSettlement/SettlementFallbackDialog'
import SettlementListDialog from './dialog/financialSettlement/SettlementListDialog'
import BillinglistViewDialog from './dialog/financialSettlement/BillinglistViewDialog'
import PaysettlementDialog from './dialog/PaysettlementDialog'
export default {
  components: {
    SettlementDialog,
    SettlementFallbackDialog,
    SettlementListDialog,
    BillinglistViewDialog,
    PaysettlementDialog
  },
  data () {
    return {
      tableData: [],
      formData: {
        customerId: '',
        searchMent: ''
      },
      order: {},
      uploadData: {},
      pageNo: 1,
      number: 15,
      total: 0,
      customerid: '',
      customerid1: '',
      customerid2: '',
      loading: true,
      loadShow: true,
      multipleSelection: [],
      userInfo: [] // 客户列表
    }
  },
  mounted () {
    const user = util.getItem('$user_fx')
    Object.assign(this.uploadData, {
      un: user.un,
      rtk: user.rtk,
      uid: user.uid,
      image: ''
    })
    this.SearchUserInfo()
    this.getTlementList(1, 15)
  },
  methods: {
    // 获取客户信息
    async SearchUserInfo () {
      const res = await SearchUserInfo({
        page: 1,
        num: 10000
      })
      if (res.status === 200) {
        this.userInfo = res.data
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 财务结算列表
    async getTlementList (pg, nb) {
      this.loading = true
      const res = await settlementList({
        customerId: this.formData.customerId,
        curpage: pg, // 页码
        pageSize: nb, // 页数
        searchCondition: this.formData.searchMent
      })
      if (res.status === 200) {
        this.tableData = res.data
        this.total = res.dataCount
        this.loading = false
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
        this.loading = false
      }
    },
    // 财务结算批量导出
    async batchExport () {
      this.loadShow = false
      let that = this
      const res = await batchExport({})
      if (res.status === 200) {
        this.$notify({
          title: '成功',
          message: res.msg,
          type: 'success'
        })
        setTimeout(function () {
          that.loadShow = true
        }, 500)
        window.location.href = res.data[0].path
        this.getTlementList(1, 15)
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    selectStar (value) {
      let _that = this
      if (value) {
        setTimeout(function () {
          _that.SearchUserInfo()
        }, 500)
      }
    },
    // 结算回退
    openFallback () {
      this.customerid1 = this.formData.customerId
      this.$store.commit('show_settlement_fallback_dialog')
    },
    // 结算
    openSettlement () {
      this.customerid = this.formData.customerId
      this.$store.commit('show_settlement_dialog')
    },
    // 款项结清
    openPay () {
      let lg = this.multipleSelection.length
      if (lg !== 1) {
        this.$message({
          message: '请选择单条信息',
          type: 'warning'
        })
        return false
      }
      this.order = this.multipleSelection[0]
      this.$store.commit('show_paysettlement_dialog')
    },
    handeList (id) {
      this.customerid2 = id
      this.$store.commit('show_settlement_list_dialog')
    },
    openBilling () {
      this.$store.commit('show_billing_list_dialog')
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleCurrentChange (val) {
      this.getTlementList(val, this.number)
      this.pageNo = val
    },
    // 每页条数
    handleSizeChange (val) {
      this.getTlementList(this.pageNo, val)
      this.number = val
    }
  }
}
</script>

<style lang="less">
 .salesman-man-pagination {
    width: 100%;
    margin: 0 auto;
    margin-top: 10px;
  }
</style>
